<template>
  <!-- 指数对比树选择框 -->
  <!-- placeholder="请选择" -->
  <el-cascader
    v-bind="$attrs"
    v-on="$listeners"
    class="my_el-cascader"
    :style="`width: ${width}px;`"
    :options="contrastOptions"
    :show-all-levels="false"
    :props="{
      multiple: multiple,
      label: 'typeName',
      value: 'id',
      children: 'lists',
      emitPath: false
    }"
    collapse-tags
    :clearable="clearable"
    filterable
  >
  </el-cascader>
</template>

<script>
import { queryAllIndexType } from "@/api/policyManage";

export default {
  props: {
    width: {
      type: Number,
      default: 280,
    },
    multiple: {
      type: Boolean,
      default: true,
    },
    clearable: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      contrastOptions: [],
    };
  },
  created() {
    this.queryAllIndexType();
  },
  methods: {
    // 对比指标 选择树
    queryAllIndexType() {
      queryAllIndexType().then((res) => {
        const contrastOptions_obj = {};
        res.body.forEach((items, i) => {
          items.id = items.id + 9999; // 解决父级和子级同id问题
          res.body[i].typeName = items.modelName;
          items.lists.forEach((item) => {
            contrastOptions_obj[item.id] = item.typeName;
          });
        });
        this.$emit("contrastOptionsObj", contrastOptions_obj);
        this.contrastOptions = res.body;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.my_el-cascader {
  ::v-deep .el-input--suffix {
    input::-webkit-input-placeholder { /* WebKit browsers 适配谷歌 */
      color: transparent;
    }
    input:-moz-placeholder { /* Mozilla Firefox 4 to 18 适配火狐 */
      color: transparent;
    }
    input::-moz-placeholder { /* Mozilla Firefox 19+ 适配火狐 */
      color: transparent;
    }
    input:-ms-input-placeholder { /* Internet Explorer 10+  适配ie*/
      color: transparent;
    }
  }
}
</style>

